<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>获取数据</button>
<hr/>
<div id="app">

</div>
</body>
<script>
    const btn = document.querySelector("button");
    const app = document.querySelector("#app");
    btn.onclick = function () {
        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        xhr.open("get", "./my.json");
        xhr.send();
        xhr.onload = function () {
            // app.innerHTML="";
            // xhr.response.data.forEach(info=>{
            //     app.innerHTML += "<p>"+info.name+"</p>";
            // })

            // let strHtml = "";
            // xhr.response.data.forEach(info => {
            //     strHtml += "<p>" + info.name + "</p>";
            // })
            // app.innerHTML = strHtml;

            // app.innerHTML = xhr.response.data.map(item=>"<p>"+item.name+"</p>").join("")

            app.innerHTML = xhr.response.data.map(item=>(`
                <p>${item.name}</p>
            `)).join("")
        }
    }
</script>
</html>